<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形</title>

    <!--
    左上  右上  右下  左下，顺时针方向
    -->
    <!--
    圆圈：圆角 = 半径！
    -->
    <!--
    border-radius制作特殊图形：圆形
    1.元素的宽度和高度必须相同
    2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
    -->
    <style>

        div{
            width: 200px;
            height: 200px;
            border: 5px solid violet;
            /*border-radius: 100px;*/
            border-radius: 50%;
        }

    </style>

</head>
<body>

<div>

</div>

</body>
</html>